<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">

.zhangruixi{width: 200px;height: 200px;background: black;transition:0.5s all ease;}
.wangyuechao{
	background: pink;width: 100px;height:100px;
}

    </style>
</head>
<body>
<div class='zhangruixi wangyuechao'></div>
<script type="text/javascript">
	
	var oDiv = document.querySelector('div');


	alert(oDiv.classList.contains('zhangrui'))
	//alert(HTMLDivElement.prototype.classList.call(oDiv.className,'zhangruixi'));
	//oDiv.classList.remove('wangyuechao');

	//console.log(HTMLDivElement.prototype)

/*
	window.onclick = function(){
		oDiv.classList.toggle('wangyuechao')
	}
*/
	//oDiv.classList.add('wangyuechao')
	//console.log(oDiv.classList)

	/*
	//alert(oDiv.className)
	if(oDiv.className){
		oDiv.className += ' wangyuechao';
		//alert(2);
	}
	else{
		oDiv.className = 'wangyuechao';
		//alert(1);
	}
	*/
</script>
</body>
</html>